<template>
	<wsPage title="Banner图管理">
		<div slot="page_operate">
			<span style="color:red;font-size:small;" v-if = "type == 1">为保证显示效果，建议图片宽度大于720px </span>
	        <span style="color:red;font-size:small;" v-if = "status == 1">为保证显示效果，建议图片大小为414*688px </span>
	        <span style="color:red;font-size:small;" v-if = "status == 2">为保证显示效果，建议图片大小为414*232px </span>
			<Button @click="goBack"><Icon type="ios-arrow-back"></Icon><span>返回</span></Button>
		</div>

		<wsSmPanel>
			<div slot="list_operate">
				<Upload action="/ws/batch/upload" 
	        			:show-upload-list="false"
	        			:max-size="2048"
	        			:on-format-error="handleFormatError"
        				:on-exceeded-size="handleMaxSize"
	        			:on-success="handleUploadSuccess">
	        		<Button>上传图片</Button>
			    </Upload>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>
		
		<!-- 编辑描述-->
		<wsModal v-model="modal1.show" title="编辑图片描述" @on-ok="saveModal1" @on-cancel="cancelModal1" >
			<Form ref="modal1Form" :model="modal1.model" :rules="modal1.rules" :label-width="100">
				<FormItem label="备注">
		            <Input v-model="modal1.model.title" type="textarea"></Input>
		        </FormItem>	
		    </Form>	
		</wsModal>		
	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				pnum: 0,
				type: '',
				status:'',
				/**
				 * 表单对象
				 */
				form: {
					imgId: '',
					tenantId: ''
				},
				table: {
					columns: [{
                        title: '编号',
                        width: 80,
                        key: 'id',
                        align: 'center'
                    },{
                        title: '图片',
                        align: 'center',
                        render: (h, params) => {
							return (
								<img v-img={{'title': params.row.title, 'group':'a'}} src={'/ws/img/view/' + params.row.fileId} style="width: auto;height: 120px;padding: 5px;"></img>
							)
                        }
                    },{
                        title: '描述',
                        key: 'title'
                    },{
						title: '顺序',
						width: 160,
						align: 'center',
						className: 'ws-oper-button',
						render: (h, params) => {
                        	return h('div', [
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small',
	                                    icon: 'chevron-up'
	                                },
	                                domProps: {
	                                	title: '顶部'
	                                },
									on: {
										click: () => {
											this.moveItem(params.row, 1);
										}
									}
                        		} ),
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small',
	                                    icon: 'arrow-up-c'
	                                },
	                                domProps: {
	                                	title: '上移'
	                                },
									on: {
										click: () => {
											this.moveItem(params.row, 2);
										}
									}
                        		} ),
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small',
	                                    icon: 'arrow-down-c'
	                                },
	                                domProps: {
	                                	title: '下移'
	                                },
									on: {
										click: () => {
											this.moveItem(params.row, 3);
										}
									}
                        		} ),
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small',
	                                    icon: 'chevron-down'
	                                },
	                                domProps: {
	                                	title: '底部'
	                                },
									on: {
										click: () => {
											this.moveItem(params.row, 4);
										}
									}
                        		} )
                        	])
                        }
					},{
						title: '操作',
						width: 120,
						align: 'center',
						render: (h, params) => {
                        	return h('div', [
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											this.showEditModal(params.row);
										}
									}
                        		} ,'编辑'),
                        		h('Button', {
                        			props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											this.showDelModal(params.row);
										}
									}
                        		} ,'删除')
                        	])
                        }
					}],
					data: [],
					selectedRow: null
				},
				modal1: {
					show: false,
					model: {
						id: '',
						imgId: '',
						tenantId: '',
						fileId: '',
						type: '',
						title: ''
					},
					rules: {
						
					}
				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				this.form.imgId = this.$route.query.imgId;
				this.form.tenantId = this.$route.query.tenantId;
				this.type = this.$route.query.type;
				this.status = this.$route.query.status;
				this.initData();
			},
			/**
			 * 初始化数据
			 */
			initData() {
				const _this = this;
				let imgId_ = this.form.imgId;
				let tenantId_ = this.form.tenantId;
				this.axios.get('/ws/sys/imgs/' + imgId_ + '/' + tenantId_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildTableData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});				
			},
			/**
			 * 构建表格数据
			 */
			buildTableData(data_) {
				this.table.data = data_;
			},
			/**
			 * 上传成功
			 */
			handleUploadSuccess(res, file) {
				if(res.meta.code == 0) {
		    		let fileList = res.data.fileList;
		    		if(fileList && fileList.length > 0) {
		    			let uploadFile = fileList[0];
		    			this.saveBanner(uploadFile);
		    		}
		    	}
			},
			/**
			 * 保存banner
			 */
		   	saveBanner(uploadFile) {
		   		const _this = this;
				this.modal1.model.imgId = this.form.imgId;
				this.modal1.model.tenantId = this.form.tenantId;
				this.modal1.model.fileId = uploadFile.fileId;
		   		let postData_ = this.modal1.model;
				this.axios.post('/ws/sys/imgs', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.resetForm();
						_this.initData();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('上传图片失败:' + message_);
					}
				});		   		
		   	},		
		   	/**
		   	 * 重置表单
		   	 */
		   	resetForm() {
		   		this.modal1.model = {
					id: '',
					imgId: '',
					tenantId: '',
					fileId: '',
					type: '',
					title: ''
				};
		   	},
			/**
			 * 取消模态框1
			 */
			cancelModal1() {
				this.modal1.show = false;
				this.$refs['modal1Form'].resetFields();
				this.resetForm();
			},
			/**
			 * 保存模态框1
			 */
			saveModal1() {
		   		const _this = this;
		   		let row_ = this.table.selectedRow;
		   		
		   		this.modal1.model.id = row_.id;
				this.modal1.model.tenantId = this.form.tenantId;
				
		   		let postData_ = this.modal1.model;
				this.axios.put('/ws/sys/imgs', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.cancelModal1();
						_this.initData();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改描述失败:' + message_);
					}
				});				
			},
			/**
			 * 显示编辑模态框
			 */
			showEditModal(row_) {
				this.table.selectedRow = row_;
				this.loadEditItem(row_);
			},
			/**
			 * 加载编辑选项
			 */
			loadEditItem(row_) {
				const _this = this;
				let imgItemId = row_.id;
				let tenantId_ = row_.tenantId;
				this.axios.get('/ws/sys/imgs/item/' + imgItemId + '/' + tenantId_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildEditData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});					
			},
			/**
			 * 构建编辑数据
			 */
			buildEditData(data_) {
				this.modal1.model = {
					id: data_.id,
					imgId: '',
					tenantId: data_.tenantId,
					fileId: '',
					type: '',
					title: data_.title
				};
				this.modal1.show = true;
			},
			/**
			 * 显示删除模态框
			 */
			showDelModal(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除选中的图片吗?',
        			onOk: function() {
        				_this.delImgItem(row_);
        			}
        		});
			},
			/**
			 * 删除选中的图片项
			 */
			delImgItem(row_) {
				const _this = this;
				let imgItemId = row_.id;
				let tenantId_ = row_.tenantId;
				this.axios.delete('/ws/sys/imgs/item/' + imgItemId + '/' + tenantId_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});					
			},
			/**
			 * 移动
			 */
			moveItem(row_, direction_) {
				const _this = this;
				let imgItemId = row_.id;
				let tenantId_ = row_.tenantId;
				this.axios.put('/ws/sys/imgs/item/order/' + imgItemId + '/' + tenantId_ + '/' + direction_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});	
			},
			handleFormatError (file) {
				this.$Message.warning('文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。');
            },
            handleMaxSize (file) {
            	this.$Message.warning('文件 ' + file.name + ' 太大，不能超过 2M。');
            },
			/**
			 * 返回上一步
			 */
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style>
</style>